<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选课管理</title>
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>

<form class="layui-form" style="padding: 10px;" id="fors">



        <div class="layui-inline">
            <label class="layui-form-label">系部名称</label>
            <div class="layui-input-inline">
                <select name="did" id="did" lay-filter="select" class="layui-input" lay-verify="required">
                    <option value=""></option>
                </select>
            </div>


        </div>

    <div class="layui-inline">
        <label class="layui-form-label">专业名称</label>
        <div class="layui-input-inline">
            <select name="mid" id="mid" lay-filter="selMa" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">年级名称</label>
        <div class="layui-input-inline">
            <select name="gid" id="gid" lay-filter="selGr" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">班级名称</label>
        <div class="layui-input-inline">
            <select name="classid" id="classid" lay-filter="selCl" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">学生名称</label>
        <div class="layui-input-inline">
            <select name="sname" id="sid" lay-filter="selSt" class="layui-input" lay-verify="editSelGrade" lay-search>
                <option value=""></option>
            </select>

        </div>
    </div>

</form>

<!--换课的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">



            <div class="layui-inline">
                <label class="layui-form-label">请选课程:</label>
                <div class="layui-input-inline">
                    <select name="ccd" id="cid" lay-filter="selCo" class="layui-input" lay-verify="required">
                        <option value=""></option>
                    </select>

                </div>
            </div>
        </div>

        <input type="hidden" name="sid"  autocomplete="off">
        <input type="hidden" name="cid"  autocomplete="off">

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" id="yu" lay-submit="">提交</button>
            </div>
        </div>
    </form>

</div>
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<script>
    var tableIns;
    layui.use([ 'jquery', 'layer', 'form', 'table'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;


        //渲染数据表格
        tableIns=table.render({
            elem: '#userTable'   //渲染的目标对象
            ,url:'selSc' //数据接口
            ,title: '选课表'//数据导出来的标题
            ,toolbar:"#userToolBar"   //表格的工具条
            ,cellMinWidth:200 //设置列的最小默认宽度
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limit: 10//每页数据默认采用
            ,cols: [
                [   //列表数据


                    {field:'scid', title:'ID',align:'center',width:"130",sort: true}
                    ,{field:'stuid', title:'学号',align:'center',width:"130"}

                    ,{field:'sname', title:'学生名',align:'center',width:"150",sort: true}
                    ,{field:'cname', title:'课程名',align:'center',width:"200",sort: true}
                    ,{field:'classname', title:'班级名字',align:'center',width:"200",sort: true}
                    ,{field:'studytype', title:'班级名字',align:'center',width:"200",sort: true}

                    ,{fixed: '', title:'操作',align:'center',width:'270',templet:function(data){
                        if(data.studytype=='选修'){
                            return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">强制退课</a><a class="layui-btn layui-btn-danger layui-btn-xs" style="background-color: #fff979;" lay-event="dels">换课</a>'
                        }else{
                            return '必修不可操作';
                        }


                    }}
                ]
            ]
        })
        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                layer.confirm('确定要为'+data.sname+'退选【'+data.cname+'】这个课程吗', function(index){
                    //向服务端发送删除指令
                    $.post("dropCous",{cid:data.cid,sid:data.sid},function(res){
                        layer.msg(res);
                        //刷新数据 表格
                        tableIns.reload();
                    })
                });
            }else if(layEvent === 'dels'){
                openUpdate(data);
            }
        });
        //打开修改页面
        function openUpdate(data){
            mainIndex=layer.open({
                type:1,
                title:'修改',
                content:$("#saveOrUpdateDiv"),
                area:['500px','300px'],
                success:function(index){
                    form.val("dataFrm",data);
                    url="changesCou";
                }
            });
        }
        //提交
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
                layer.msg(obj);
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                tableIns.reload();
            })
        });
        //渲染下拉框

       $.ajax({
            //要跳转的地址
            url: 'selDe',
            //数据类型
            dataType: 'json',

            //提交类型
            type: 'post',
            //查询成功后执行的方法

            success: function (data) {

                $.each(data, function (index, item) {
                    $('#did').append(new Option(item.dname, item.did));// 下拉菜单里添加元素

                });
                form.render();
            }

        });
        $.ajax({
            //要跳转的地址
            url: 'selCo',
            //数据类型
            dataType: 'json',

            //提交类型
            type: 'post',
            //查询成功后执行的方法

            success: function (data) {

                $.each(data, function (index, item) {
                    $('#cid').append(new Option(item.cname, item.cid));// 下拉菜单里添加元素

                });
                form.render();
            }

        });
                //监听系
               form.on("select(select)",function(obj){

                    $('#mid').html("");
                    $('#gid').html("");
                    $('#classid').html("");
                    $('#sid').html("");
                    var did=  $("#did").val();

                    $.ajax({
                        //要跳转的地址
                        url: 'selMa',
                        //数据类型
                        data:{
                            did:did
                        },
                        dataType: 'json',
                        //提交类型
                        type: 'post',
                        //查询成功后执行的方法

                        success: function (obj) {
                            $.each(obj, function (index, item) {
                                $('#mid').append(new Option(item.mname,item.mid));// 下拉菜单里添加元素
                            });
                            form.render();

                            var mid=  $("#mid").val();
                            $.ajax({
                                //要跳转的地址
                                url: 'selGr',
                                //数据类型
                                data:{
                                    mid:mid
                                },
                                dataType: 'json',
                                //提交类型
                                type: 'post',
                                //查询成功后执行的方法

                                success: function (oba) {
                                    $.each(oba, function (index, item) {
                                        $('#gid').append(new Option(item.gname,item.gid));// 下拉菜单里添加元素
                                    });
                                    form.render();
                                    var gid=  $("#gid").val();
                                   $.ajax({
                                        //要跳转的地址
                                        url: 'selCl',
                                        //数据类型
                                        data:{
                                            gid:gid
                                        },
                                        dataType: 'json',
                                        //提交类型
                                        type: 'post',
                                        //查询成功后执行的方法

                                        success: function (objss) {
                                            $.each(objss, function (index, item) {
                                                $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                                            });
                                            form.render();
                                            var classid=$("#classid").val();
                                            $.ajax({
                                                //要跳转的地址
                                                url: 'selSt',
                                                //数据类型
                                                data:{
                                                    classid:classid
                                                },
                                                dataType: 'json',
                                                //提交类型
                                                type: 'post',
                                                //查询成功后执行的方法

                                                success: function (objz) {
                                                    $.each(objz, function (index, item) {
                                                        $('#sid').append(new Option(item.sname,item.sname));// 下拉菜单里添加元素
                                                    });
                                                    form.render();

                                                    //var params=$("#fors").serialize();//序列化表单
                                                    var sname=$("#sid").val();

                                                    tableIns.reload({
                                                        url:"selSc?sname="+sname
                                                    })

                                                }
                                            })

                                        }
                                    })
                                }
                            })

                }
                });

                });








        //-------------------------------以下是监听----------------------------------



        //监听专业
        form.on("select(selMa)",function(obj){

            $('#gid').html("");
            $('#classid').html("");
            $('#sid').html("");

            var mid=  $("#mid").val();

            var mid=  $("#mid").val();
            $.ajax({
                //要跳转的地址
                url: 'selGr',
                //数据类型
                data:{
                    mid:mid
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (oba) {
                    $.each(oba, function (index, item) {
                        $('#gid').append(new Option(item.gname,item.gid));// 下拉菜单里添加元素
                    });
                    form.render();
                    var gid=  $("#gid").val();
                    $.ajax({
                        //要跳转的地址
                        url: 'selCl',
                        //数据类型
                        data:{
                            gid:gid
                        },
                        dataType: 'json',
                        //提交类型
                        type: 'post',
                        //查询成功后执行的方法

                        success: function (objss) {
                            $.each(objss, function (index, item) {
                                $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                            });
                            form.render();
                            var classid=$("#classid").val();
                            $.ajax({
                                //要跳转的地址
                                url: 'selSt',
                                //数据类型
                                data:{
                                    classid:classid
                                },
                                dataType: 'json',
                                //提交类型
                                type: 'post',
                                //查询成功后执行的方法

                                success: function (objz) {
                                    $.each(objz, function (index, item) {
                                        $('#sid').append(new Option(item.sname,item.sname));// 下拉菜单里添加元素
                                    });
                                    form.render();

                                    //var params=$("#fors").serialize();//序列化表单
                                    var sname=$("#sid").val();
                                    //alert(params);
                                    tableIns.reload({
                                        url:"selSc?sname="+sname
                                    })

                                }
                            })

                        }
                    })
                }
            })
        });
        //监听年级
        form.on("select(selGr)",function(obj){
            $('#classid').html("");
            $('#sid').html("");
            var gid=  $("#gid").val();

            var gid=  $("#gid").val();
            //var params=$("#fors").serialize();//序列化表单
            var sname=$("#sid").val();
            //alert(params);
            tableIns.reload({
                url:"selSc?sname="+sname
            })
            $.ajax({
                //要跳转的地址
                url: 'selCl',
                //数据类型
                data:{
                    gid:gid
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (objss) {
                    $.each(objss, function (index, item) {
                        $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                    });
                    form.render();
                    var classid=$("#classid").val();
                    $.ajax({
                        //要跳转的地址
                        url: 'selSt',
                        //数据类型
                        data:{
                            classid:classid
                        },
                        dataType: 'json',
                        //提交类型
                        type: 'post',
                        //查询成功后执行的方法

                        success: function (objz) {
                            $.each(objz, function (index, item) {
                                $('#sid').append(new Option(item.sname,item.sname));// 下拉菜单里添加元素
                            });
                            form.render();
                            //var params=$("#fors").serialize();//序列化表单
                            var sname=$("#sid").val();
                            //alert(params);
                            tableIns.reload({
                                url:"selSc?sname="+sname
                            })


                        }
                    })

                }
            })
        });
        //监听班级
        form.on("select(selCl)",function(obj){

            $('#sid').html("");
            var classid=  $("#classid").val();
            //var params=$("#fors").serialize();//序列化表单
            var sname=$("#sid").val();
            //alert(params);
            tableIns.reload({
                url:"selSc?sname="+sname
            })
            $.ajax({
                //要跳转的地址
                url: 'selSt',
                //数据类型
                data:{
                    classid:classid
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (objz) {
                    $.each(objz, function (index, item) {
                        $('#sid').append(new Option(item.sname,item.sname));// 下拉菜单里添加元素
                    });
                    form.render();
                    //var params=$("#fors").serialize();//序列化表单
                    var sname=$("#sid").val();
                    //alert(params);
                    tableIns.reload({
                        url:"selSc?sname="+sname
                    })


                }
            })
        });
        //监听学生
        form.on("select(selSt)",function(obj){
            //var params=$("#fors").serialize();//序列化表单
            var sname=$("#sid").val();
            //alert(params);
            tableIns.reload({
                url:"selSc?sname="+sname
            })

        });

    });
</script>
</body>
</html>